<template>
  <div id="mine-order-detail">
    <header class="header">
      <h2>
        <span>邮寄公司：{{ mailCompany }}</span>
        <span>快递单号：{{ mailNum }}</span>
      </h2>
      <img src="../../assets/images/mine/icon-car.png" alt="">
    </header>

    <h4 class="basic">
      <span class="company" :class="{
      'ha': company === '1',
      'astp': company === '2',
      'dh': company === '3',
      'rb': company === '4',
      'bbw': company === '5'
      }"></span>
      <span class="price">&yen;&nbsp;{{ price }}</span>
    </h4>

    <h4 class="basic">
      <span class="normal">订单编码：{{ policy }}</span>
      <span class="normal">{{ date }}</span>
    </h4>

    <h4 class="basic">
      <span class="normal">商业险保单号：</span>
      <span class="normal">{{ othersPolicy }}</span>
    </h4>

    <h4 class="basic">
      <span class="normal">交强险保单号：</span>
      <span class="normal">{{ compulsoryPolicy }}</span>
    </h4>

    <grey-header class="ownerInfo" title="车主信息">
      <router-link :to="'/mine/mine-order-detail-owner/check/' + car_owner_id" tag="span">详情 ></router-link>
    </grey-header>

    <ul>
      <li v-for="(item, index) in ownerInfo" :key="index">
        <span>{{ item.title }}：</span>
        <span>{{ item.val }}</span>
      </li>
    </ul>

    <!--<grey-header title="保单邮寄地址"></grey-header>-->

    <grey-header class="carInfo" title="车辆信息">
      <router-link :to="'/mine/mine-order-detail-car/check/' + car_id" tag="span">详情 ></router-link>
    </grey-header>

    <ul>
      <li v-for="(item, index) in carInfo" :key="index">
        <span>{{ item.title }}：</span>
        <span>{{ item.val }}</span>
      </li>
    </ul>

    <grey-header title="保险详情"></grey-header>

    <section>
      <template v-for="(item, index) in insurances" v-if="item.arr.length">
        <h6>{{ item.type }}</h6>
        <ul>
          <li v-for="(subItem, subIndex) in item.arr" :key="subIndex">
            <span>{{ subItem.name | short }}</span>
            <span class="value">{{ subItem.name === '玻璃险' ? (subItem.insured_value === 1 ? '国产' : '进口') : (subItem.deductible === 2 ? '' : '不计免赔') | formatTenThousand }}</span>
            <span>&yen;&nbsp;{{ subItem.insured_value }}</span>
          </li>
        </ul>
      </template>
    </section>

    <footer>
      <span></span>
      <section>
        <p>{{ start_time }}</p>
        <h6>起保日期</h6>
      </section>
      <section>
        <p>{{ end_time }}</p>
        <h6>终保日期</h6>
      </section>
      <section>
        <p>{{ days }} 天</p>
        <h6>保险期限</h6>
      </section>

      <span></span>
      <section>
        <p>{{ jq_start_time }}</p>
        <h6>起保日期</h6>
      </section>
      <section>
        <p>{{ jq_end_time }}</p>
        <h6>终保日期</h6>
      </section>
      <section>
        <p>{{ jq_days }} 天</p>
        <h6>保险期限</h6>
      </section>
    </footer>
  </div>
</template>

<script>
  import GreyHeader from '../comp/grey-header.vue';

  export default {
    name: "mine-order-detail",
    components: {
      GreyHeader
    },
    data() {
      return {
        mailCompany: '',
        mailNum: '',
        company: '',
        price: '',
        policy: '',
        othersPolicy: '',
        compulsoryPolicy: '',
        date: '',
        ownerInfo: [
          {
            title: '车主姓名',
            val: ''
          },
          {
            title: '车主手机号',
            val: ''
          }
        ],
        carInfo: [
          {
            title: '车牌号',
            val: ''
          },
          {
            title: '注册登记日',
            val: ''
          },
          {
            title: '车架号',
            val: ''
          },
          {
            title: '发动机号',
            val: ''
          }
        ],
        insurances: [
          {
            type: '商业险 - 主险',
            arr: []
          },
          {
            type: '商业险 - 附加险',
            arr: []
          },
          {
            type: '交强险',
            arr: []
          },
        ],
        start_time: '',
        end_time: '',
        days: '',
        jq_start_time: '',
        jq_end_time: '',
        jq_days: '',
        car_owner_id: '',
        car_id: ''
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_ORDER_DETAIL,
        params: {
          id: this.$route.params.order_id,
          status: this.$route.params.status,
        },
        success: (res) => {
          let details = res.data.data;

          this.mailCompany = details.express;
          this.mailNum = details.express_no;

          this.company = details.company_id;
          this.price = details.actual_price;
          this.policy = details.apply_policy_no;
          this.othersPolicy = details.sy_app_ply_no;
          this.compulsoryPolicy = details.jq_app_ply_no;
          this.date = details.createtime;

          this.ownerInfo[0].val = details.name;
          this.ownerInfo[1].val = details.phone;

          this.carInfo[0].val = details.plate_num;
          this.carInfo[1].val = details.buy_time;
          this.carInfo[2].val = details.vin;
          this.carInfo[3].val = details.engine_num;

          let insurances_details = details.insurance_info;
          for (let i = 0; i < insurances_details.length; i++) {
            if (insurances_details[i].type === 1 && insurances_details[i].insured_type === 1) {
              this.insurances[0].arr.push(insurances_details[i]);
            } else if (insurances_details[i].type === 1 && insurances_details[i].insured_type === 2) {
              this.insurances[1].arr.push(insurances_details[i]);
            } else if (insurances_details[i].type === 2) {
              this.insurances[2].arr.push(insurances_details[i]);
            }
          }

          this.start_time = details.start_time;
          this.end_time = details.end_time;
          this.days = details.insurance_period;

          this.jq_start_time = details.jq_start_time;
          this.jq_end_time = details.jq_end_time;
          this.jq_days = details.jq_insurance_period;

          this.car_owner_id = details.car_owner_id;
          this.car_id = details.car_id;
        }
      });
    }
  }
</script>

<style scoped lang="scss">

  #mine-order-detail {

    $this-public-li-height: 3rem;

    > .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 9.8rem;
      background: #62bfff;
      background: -moz-linear-gradient(right, #62bfff, #0097ff);
      background: -webkit-gradient(linear, left 0, right 0, from(#62bfff), to(#0097ff));

      > h2 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 68%;
        padding-left: 1.6rem;
        font-size: 1.2rem;
        color: #fff;
      }

      > img {
        width: 11.8rem;
        height: auto;
      }
    }

    > .basic {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 5rem;
      padding: 0 1rem;
      background: $white;
      border-bottom: 2px solid #eee;

      > .company {
        width: 80px;
        height: 24px;
        background: url("../../assets/images/public/companies.png") no-repeat center / $size-as-parent auto;

        &.ha {
          background-position-y: 3px;
        }

        &.astp {
          background-position-y: -43px;
        }

        &.dh {
          background-position-y: -89px;
        }

        &.rb {
          background-position-y: -136px;
        }

        &.bbw {
          background-position-y: -187px;
        }
      }

      > .price {
        font-size: 1.5rem;
        color: #f00;
      }

      > .normal {
        font-size: 1.5rem;
        color: #333;
      }
    }

    > .ownerInfo, > .carInfo {
      position: relative;

      > span {
        position: absolute;
        top: 0;
        right: 1rem;
        height: $size-as-parent;
      }
    }

    ul {
      background: $white;

      > li {
        display: flex;
        justify-content: space-between;
        height: $this-public-li-height;
        padding: 0 1rem;
        line-height: $this-public-li-height;
        font-size: 1.2rem;
        color: #333;
      }
    }

    > section {
      padding: 1rem;
      background: $white;

      > h6 {
        font-weight: bold;
        margin-bottom: .9rem;
      }

      > ul {
        margin-bottom: .9rem;

        .value {
          color: #999;
        }

        span:first-of-type {
          width: 52%;
        }
        span:nth-of-type(2) {
          width: 20%;
        }
        span:last-of-type {
          width: 28%;
          text-align: right;
        }
      }
    }

    > footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      height: 128px;
      padding: 0 1rem;
      background: #e9f6ff;
      border-radius: 0 0 .9rem .9rem;

      > span {
        width: 7%;
        height: 0;
        padding-bottom: 7%;
        background: url("../../assets/images/mine/icon-insurance-type.png") no-repeat (0 0) / $size-as-parent auto;

        &:first-of-type {
          background-position: 0 0;
        }

        &:last-of-type {
          background-position: 0 bottom;
        }
      }

      > section {
        width: 31%;
        text-align: center;

        > p {
          margin-bottom: 1rem;
          font-size: 1.2rem;
          color: #333;
        }

        > h6 {
          font-size: 1.5rem;
          color: #999;
        }
      }
    }
  }
</style>
